<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="physics_diagram" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('physics_diagram');
    const ctx = canvas.getContext('2d');

    // --- Style and Font Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Define Coordinates & Dimensions ---
    const axisX = 250;
    const rodY = 150;
    const rodLength = 300;
    const rodThickness = 8;

    // A is at L/3 from axis, D is at 2L/3 from axis
    const rodStartX = axisX - rodLength / 3; // 250 - 100 = 150
    const rodEndX = axisX + 2 * rodLength / 3; // 250 + 200 = 450

    // --- Draw Rod AD ---
    ctx.beginPath();
    // Using strokeRect is cleaner for a simple rectangle outline.
    ctx.strokeRect(rodStartX, rodY - rodThickness / 2, rodLength, rodThickness);

    // --- Draw Labels A and D ---
    ctx.fillText('A', rodStartX - 20, rodY);
    ctx.fillText('D', rodEndX + 20, rodY);

    // --- Draw Axis of Rotation OO' ---
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(axisX, rodY - 60);
    ctx.lineTo(axisX, rodY + 100);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // --- Draw Labels O, O', C, B ---
    ctx.fillText('O', axisX, rodY - 75);
    // In the original, C, O' and B are slightly offset to the right
    ctx.fillText('C', axisX + 15, rodY + 40);
    ctx.fillText("O'", axisX + 10, rodY + 115);
    ctx.fillText('B', axisX + 60, rodY + 70);


    // --- Draw Rotation Arrow and Label ω ---
    // Curved arrow (using an ellipse for a perspective feel)
    ctx.beginPath();
    // ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
    // Draw the top arc from right to left (counter-clockwise)
    ctx.ellipse(axisX, rodY - 20, 40, 15, 0, 0, Math.PI, true);
    ctx.stroke();

    // Arrowhead for the curved arrow at the left end
    const arrowEndX = axisX - 40;
    const arrowEndY = rodY - 20;
    ctx.beginPath();
    ctx.moveTo(arrowEndX, arrowEndY); // Tip of the arrow
    ctx.lineTo(arrowEndX + 10, arrowEndY - 5); // Upper back corner
    ctx.lineTo(arrowEndX + 10, arrowEndY + 5); // Lower back corner
    ctx.closePath();
    ctx.fill();

    // Label for angular velocity ω
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('ω', axisX + 60, rodY - 20);

    // Reset font for other labels
    ctx.font = '20px Arial';

    // --- Draw Magnetic Field Arrows ---
    // A helper function for drawing the upward-pointing arrows
    function drawUpArrow(x, y_start, y_end) {
        ctx.beginPath();
        ctx.moveTo(x, y_start);
        ctx.lineTo(x, y_end);
        ctx.stroke();
        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(x, y_end);
        ctx.lineTo(x - 5, y_end + 10);
        ctx.lineTo(x + 5, y_end + 10);
        ctx.closePath();
        ctx.fill();
    }
    // Positions based on the original diagram
    drawUpArrow(axisX - 100, rodY + 80, rodY + 20);
    drawUpArrow(axisX + 100, rodY + 80, rodY + 20);

    // --- Draw Bottom Caption ---
    ctx.fillText('题 5 图', axisX, 300);

</script>
</body>
</html>